<template>
  <div>

    <div class="radius-container">
      <div class="border-b pad-10 font-w font-15 topbar-style">微客要求</div>
      <div class="pad-20">
        <el-form :model="form" label-width="135px" :rules="rules">
          <div class="flex v-align-c">
            <el-switch v-model="form.requireMemberTypeFlag == '1'? true: false" class="mar-l-20"
                       @change="changeMemberTypeFlag(form.requireMemberTypeFlag)"></el-switch>
            <el-form-item label="根据微客类型推送：" class="mar-b-0" label-width="150px">
              <el-radio-group v-model="form.requireMemberType" v-if="form.requireMemberTypeFlag == '1'">
                <template v-for="(val,key) in dict.requireMemberType">
                  <el-radio :label="key">{{val}}</el-radio>
                </template>
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="flex v-align-c flex-area" :class="form.requireMemberDirectionFlag=='1'?'area-height':''">
            <el-switch v-model="form.requireMemberDirectionFlag =='1'? true: false" class="mar-l-20"
                       @change="changeMemberDirectionFlag(form.requireMemberDirectionFlag)"></el-switch>
            <el-form-item label="定向选择微客推送：" class="mar-b-0" label-width="150px"></el-form-item>
            <div v-if="form.requireMemberDirectionFlag =='1'" class="area-box">
              <el-input type="textarea" :rows="3" placeholder="请选择微客" style="width: 38%"  :disabled="true"
                        v-model="selectPushMemberNames"/>
              <el-button type="primary" size="mini" class="mar-l-15" @click="selectMemberDirection">选择微客</el-button>
            </div>
          </div>

          <div class="flex v-align-c">
            <el-switch v-model="form.requireAreaFlag == '1'? true:false" class="mar-l-20"
                       @change="changeAreaFlag(form.requireAreaFlag)"></el-switch>
            <el-form-item label="根据地区选择推送：" class="mar-b-0" label-width="150px">
              <el-select v-model="form.provinceCode" filterable placeholder="请选择省份" @change="changeProvince()"
                         v-if="form.requireAreaFlag == '1'">
                <el-option v-for="item in provinceList" :key="item.areaCode"
                           :label="item.areaName" :value="item.areaCode">
                </el-option>
              </el-select>

              <el-select v-model="form.cityCode" filterable placeholder="请选择省份" v-if="form.requireAreaFlag == '1'">
                <el-option v-for="item in useCityList" :key="item.areaCode"
                           :label="item.areaName" :value="item.areaCode">
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="flex v-align-c flex-area" :class="form.recruitFlag == '1'?'area-height':''">
            <el-switch v-model="form.recruitFlag == '1'? true:false" class="mar-l-20"
                       @change="changeRecruit(form.recruitFlag)"></el-switch>
            <el-form-item label="是否招募新微客：" class="mar-b-0">
              <div class="flex v-align-c mar-t--3">
                <div class="pad-t-5 mar-l--15 mar-r--10">
                  <el-popover
                    placement="top-start"
                    title="说明："
                    width="200"
                    trigger="hover"
                    class="pad-l-5 pad-r-25"
                    content="选择招募后，公司相关的招募员将收到招募海报信息。不选择招募后，公司招募员将不会收到招募海报信息。">
                    <svg-icon slot="reference" class="questionCircle inline-block" icon-class="questionCircle"/>
                  </el-popover>
                </div>
              </div>
            </el-form-item>
            <div v-if="form.recruitFlag == '1'? true:false" class="area-box">
              <el-input type="textarea" :rows="3" placeholder="请选择招募员" style="width: 38%" :disabled="true"
                        v-model="selectRecruiterNames"/>
              <el-button type="primary" size="mini" class="mar-l-15" @click="selectRecruiter">选择招募员</el-button>
            </div>
          </div>

          <div class="flex v-align-c flex-area">
            <el-switch v-model="form.onceSign == '1'? true:false" class="mar-l-20"
                       @change="changeOnceSign(form.onceSign)"></el-switch>
            <el-form-item label="是否单次签约：" class="mar-b-0">
              <div class="flex v-align-c mar-t--3">
                <div class="pad-t-5 mar-l--15 mar-r--10">
                  <el-popover
                    placement="top-start"
                    title="说明："
                    width="200"
                    trigger="hover"
                    class="pad-l-5 pad-r-25">
                    <svg-icon slot="reference" class="questionCircle inline-block" icon-class="questionCircle"/>
                    <div>
                      <span>● 启用：企业选择微客后，如果微客有确认签约服务协议一次之后就无需再确认。</span>
                      <br>
                      <span>● 不启用：企业选择微客后，微客需要确认签约才算正式录用。</span>
                    </div>
                  </el-popover>
                </div>
              </div>
            </el-form-item>
          </div>


        </el-form>
      </div>
    </div>


    <div>
      <!-- 选择招募微客 -->
      <el-dialog width="700px" v-el-drag-dialog :visible.sync="recruiterDialog" center>
        <div class="flex pad-l-30 mar-t-30">
          <div class="mar-l-5">
            <el-transfer
              style="text-align: left; display: inline-block"
              v-model="recruiterValues"
              filterable
              :left-default-checked="[]"
              :right-default-checked="recruiterRightValues"
              :titles="['可选招募员', '已选招募员']"
              :button-texts="['去除', '添加']"
              :format="{
                                    noChecked: '${total}',
                                    hasChecked: '${checked}/${total}'
                                  }"
              :data="recruiterDatas">
            </el-transfer>
          </div>
          <br>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeRecruiter">取消</el-button>
          <el-button type="primary" @click="submitRecruiter">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog width="700px" v-el-drag-dialog :visible.sync="pushMemberDialog" center>
        <div class="flex pad-l-30 mar-t-30">
          <!--</div>-->
          <div class="mar-l-5">
            <el-transfer
              style="text-align: left; display: inline-block"
              v-model="pushMemberValues"
              filterable
              :left-default-checked="[]"
              :right-default-checked="pushMemberRightValues"
              :titles="['可选微客', '已选微客']"
              :button-texts="['去除', '添加']"
              :format="{
                                    noChecked: '${total}',
                                    hasChecked: '${checked}/${total}'
                                  }"
              :data="pushMemberDatas">
            </el-transfer>
          </div>
          <br>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closePushMember">取消</el-button>
          <el-button type="primary" @click="submitPushMember">确定</el-button>
        </div>

      </el-dialog>
    </div>

  </div>
</template>

<script>
  import { listArea } from '@/api/area/area'
  import { listRecruiterList, listPushMemberList } from '@/api/project/taskInfo'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        form: {
          requireMemberTypeFlag: '0',
          requireMemberType: '0',
          requireMemberDirectionFlag: '0',
          requireAreaFlag: '0',
          recruitFlag: '0',
          onceSign: '0',
          provinceCode: '',
          cityCode: '',
          recruitIds: [],
          // 微客Id集合
          directionMemberIds: []
        },
        dict: {},
        selectMemberDirectionNames: '',
        // 招募弹窗 Id
        recruiterDialog: false,
        // 所选类目集合
        recruiterValues: [],
        // 右侧选中
        recruiterRightValues: [],
        // 招募员集合
        recruiterDatas: [],
        // 选择的招募员Id
        selectRecruiterIds: [],
        // 招募员Map
        recruiterMap: new Map(),
        // 使用的名称集合
        selectRecruiterNames: '',
        // 招募弹窗 Id
        pushMemberDialog: false,
        // 所选类目集合
        pushMemberValues: [],
        // 右侧选中
        pushMemberRightValues: [],
        // 选择推送微客集合
        pushMemberDatas: [],
        // 选择推送微客Id
        selectPushMemberIds: [],
        // 选择推送微客Map
        pushMemberMap: new Map(),
        // 微客使用的名称集合
        selectPushMemberNames: '',
        // 微客Id集合
        // pushMemberIds: [],
        provinceList: [],
        cityList: [],
        useCityList: [],
        rules: {}
      }
    },
    created() {
      this.initAreaList()
      this.initlistRecruiterList()
      this.initListPushMemberList()
    },
    mounted() {
      this.busListener()
      const that = this
      // 监听数据字典
      this.$bus.$on('task.edit.dict', function(data) {
        that.dict = data
      })
    },
    methods: {
      // 加载招募员
      initlistRecruiterList() {
        const enterpriseId = this.getEnterpriseId()
        listRecruiterList(enterpriseId).then(response => {
          const array = response.data
          const data = []

          const recruiterMap = new Map()
          array.forEach((recruiter) => {
            data.push({
              label: recruiter.realname,
              key: recruiter.recruiterId
            })
            recruiterMap.set(recruiter.recruiterId, recruiter)
          })
          this.recruiterDatas = data
          this.recruiterMap = recruiterMap
        })
      },
      initAreaList() {
        listArea().then(response => {
          this.provinceList = response.data.provinceList
          this.cityList = response.data.cityList
        })
      },
      changeMemberTypeFlag(flag) {
        if (flag === '1') {
          this.form.requireMemberTypeFlag = '0'
        } else {
          this.form.requireMemberTypeFlag = '1'
        }
      },
      changeMemberDirectionFlag(flag) {
        if (flag === '1') {
          this.form.requireMemberDirectionFlag = '0'
        } else {
          this.form.requireMemberDirectionFlag = '1'
        }
      },
      changeRecruit(flag) {
        if (flag === '1') {
          this.form.recruitFlag = '0'
        } else {
          this.form.recruitFlag = '1'
        }
      },
      changeAreaFlag(flag) {
        if (flag === '1') {
          this.form.requireAreaFlag = '0'
        } else {
          this.form.requireAreaFlag = '1'
        }
      },
      changeOnceSign(flag) {
        if (flag === '1') {
          this.form.onceSign = '0'
        } else {
          this.form.onceSign = '1'
        }
      },
      selectMemberDirection() {
        this.pushMemberDialog = true
      },
      // 选择招募员
      selectRecruiter() {
        this.recruiterDialog = true
      },
      submitPushMember() {
        const pushMemberValues = this.pushMemberValues
        this.selectPushMemberIds = pushMemberValues
        const pushMemberMap = this.pushMemberMap
        const pushMemberNamesArray = []
        const directionMemberIds = []
        pushMemberValues.forEach(pushMemberId => {
          const pushMember = pushMemberMap.get(pushMemberId)
          const nickname = pushMember.nickname
          pushMemberNamesArray.push(nickname)
          directionMemberIds.push(pushMemberId)
        })

        const selectPushMemberNames = pushMemberNamesArray.join(';')
        this.selectPushMemberNames = selectPushMemberNames
        this.form.directionMemberIds = directionMemberIds
        this.pushMemberDialog = false
      },
      // 选择招募新微客
      submitRecruiter() {
        const recruiterValues = this.recruiterValues
        this.selectRecruiterIds = recruiterValues
        const recruiterMap = this.recruiterMap
        const recruiterNamesArray = []
        const recruitIds = []
        recruiterValues.forEach(recruiterId => {
          const recruiter = recruiterMap.get(recruiterId)
          const realname = recruiter.realname
          recruiterNamesArray.push(realname)
          recruitIds.push(recruiterId)
        })

        const selectRecruiterNames = recruiterNamesArray.join(';')
        this.selectRecruiterNames = selectRecruiterNames
        this.form.recruitIds = recruitIds
        this.recruiterDialog = false
      },
      changeProvince() {
        this.changeCity()
        this.form.cityCode = ''
      },
      changeCity() {
        const provinceList = this.provinceList
        const provinceCode = this.form.provinceCode
        let provinceId = null
        provinceList.filter(province => {
          if (province.areaCode === provinceCode) {
            provinceId = province.areaId
            return true
          }
        })
        const cityList = this.cityList
        const newArr = []
        cityList.forEach(city => {
          const parentId = city.parentId
          if (parentId === provinceId) {
            newArr.push(city)
          }
        })
        // this.provinceCode = provinceCode
        this.useCityList = newArr
      },
      // 初始化微客
      initListPushMemberList() {
        const enterpriseId = this.getEnterpriseId()
        listPushMemberList(enterpriseId).then(response => {
          const array = response.data
          const data = []
          const pushMemberMap = new Map()

          array.forEach((pushMember) => {
            data.push({
              label: pushMember.nickname,
              key: pushMember.memberId
            })
            pushMemberMap.set(pushMember.memberId, pushMember)
          })
          this.pushMemberDatas = data
          this.pushMemberMap = pushMemberMap
        })
      },
      closeRecruiter() {
        this.recruiterDialog = false
      },
      closePushMember() {
        this.pushMemberDialog = false
      },
      busListener(taskData) {
        const that = this
        this.$bus.$on('project.task.edit.taskData', function(data) {
          that.form.requireMemberTypeFlag = data.requireMemberTypeFlag + ''
          that.form.requireMemberType = data.requireMemberType + ''
          that.form.requireMemberDirectionFlag = data.requireMemberDirectionFlag + ''
          that.form.requireAreaFlag = data.requireAreaFlag + ''
          that.form.recruitFlag = data.recruitFlag + ''
          that.form.onceSign = data.onceSign
          that.form.provinceCode = data.provinceCode
          that.form.cityCode = data.cityCode
          that.form.recruitIds = data.recruitIds
          that.form.directionMemberIds = this.$utils.isExist(data.directionMemberIds) ? data.directionMemberIds : []
          that.selectPushMemberNames = data.directionMemberNames
          that.selectRecruiterNames = data.recruiterNames

          // 推送指定微客
          const requireMemberDirectionFlag = data.requireMemberDirectionFlag
          if (requireMemberDirectionFlag === 1) {
            const directionMemberIds = this.$utils.isExist(data.directionMemberIds) ? data.directionMemberIds : []
            that.pushMemberValues = directionMemberIds
          }

          // 推送的招募员
          const recruitFlag = data.recruitFlag
          if (recruitFlag === 1) {
            const recruitIds = this.$utils.isExist(data.recruitIds) ? data.recruitIds : []
            that.selectRecruiterIds = recruitIds
            that.recruiterValues = recruitIds
            that.selectRecruiterNames = this.$utils.isExist(data.recruiterNames) ? data.recruiterNames : ''
          }
          setTimeout(function() {
            that.changeCity()
          }, 1)
        })
        this.$bus.$on('project.task.edit.taskType', function(data) {
          // taskType
          const taskType = data + ''
          if (taskType === '1') {
            that.isShow = '1'
          } else { // 协同任务
            that.isShow = '0'
          }
        })
      },
      // 校验表单
      checkForm() {
        let ret = false
        if (this.form.requireMemberTypeFlag === '1') {
          ret = true
        }
        if (this.form.requireMemberDirectionFlag === '1') {
          ret = true
        }
        if (this.form.requireAreaFlag === '1') {
          ret = true
        }
        if (this.form.recruitFlag === '1') {
          ret = true
        }
        return ret
      }
    }
  }
</script>

<style lang="less" scoped>
  .flex-area {
    position: relative;

    .area-box {
      position: absolute;
      width: 100%;
      left: 218px;
      top: 10px;
    }
  }

  .area-height {
    padding-bottom: 60px;
  }

  .flag-box {
    padding-left: 70px;
  }

  .el-input {
    width: 20%
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .main-transfer {
    width: 200px;
  }

  .main-transfer-title {
    background-color: #f5f7fa;
    height: 40px;
    font-size: 16px;
    padding-left: 20px;
  }

  .main-transfer-list {
    height: 260px;
    overflow-y: scroll;
  }

</style>
